<template>
  <div class="createScreen" v-loading="loadingShow">
    <div class="createScreen_content">
      <div class="createScreen_content_l">
        <div class="createScreen_content_l_t">同屏观看</div>
        <div class="createScreen_content_l_c" v-if="!isJoinScreen">
          <div class="createScreen_content_l_c_y">
            <div class="createScreen_content_l_c_y_t">链接码</div>
            <div class="createScreen_content_l_c_y_r">
              <el-input v-model="input" placeholder="请输入" clearable></el-input>
            </div>
          </div>
          <div class="createScreen_content_l_c_n" @click.stop.prevent="joinScreenFn">
            进入同屏
          </div>
        </div>
        <!-- 结束观看 -->
        <div class="createScreen_content_l_c createScreen_content_l_o" v-else>
          <img src="static/image/screen/same_screen_ing.png" />
          <div @click.stop.prevent="overScreenFn">结束观看</div>
        </div>
      </div>
      <div class="createScreen_content_r">
        <div class="createScreen_content_r_t">
          <div class="createScreen_content_r_t_t">在线同屏设备</div>
          <img v-if="!isUpdate" class="createScreen_content_r_t_i" src="static/image/screen/update.png"
            @click.stop.prevent="SearchPublicRoom" />
          <img v-else class="createScreen_content_r_t_i" src="static/image/screen/update-rotate.gif" />
        </div>
        <div v-if="personList.length" class="createScreen_content_r_c">
          <div class="createScreen_content_r_c_c">
            <div class="createScreen_content_r_c_c_item" v-for="(personListItem, index) in personList"
              :key="index + 'personList'">
              <div class="createScreen_content_r_c_c_item_l">
                <img :src="
                  !$isNull(personListItem.OwnerInfo.Head)
                    ? `${$store.state.headPathUrl}${personListItem.OwnerInfo.ClientID.split('_')[0]
                    }${personListItem.OwnerInfo.Head}.PNG`
                    : `static/image/home/person_${personListItem.OwnerInfo.Gender == 1 ? 1 : 2
                    }.png`
                " :onerror="defaultImg" />
                <div>{{ personListItem.OwnerInfo.Username }}</div>
              </div>
              <div class="createScreen_content_r_c_c_item_r" @click.stop.prevent="getInScreenFn(personListItem)"></div>
            </div>
          </div>
        </div>
        <div v-else class="createScreen_content_r_c close">
          <img src="static/image/screen/no_screen.png" />
          <div>暂无设备</div>
        </div>
      </div>
    </div>
    <!-- 弹出层 -->
    <div class="createScreen_alert" v-if="isInputPWD">
      <div class="createScreen_alert_c">
        <div class="createScreen_alert_c_t">
          <div>密码验证</div>
          <!-- <div @click.stop.prevent="isInputPWD = !isInputPWD"><img src="static/image/screen/popup_close.png" /></div> -->
          <div @click.stop.prevent="setScreenConfig({ isInputPWD: !isInputPWD })">
            <img src="static/image/screen/popup_close.png" />
          </div>
        </div>
        <div class="createScreen_alert_c_c">
          <el-input class="createScreen_alert_c_c_i" v-model="inputPWD" placeholder="请输入密码" clearable></el-input>
          <!-- <div class="createScreen_alert_c_c_a">
                        <img src="static/image/screen/tips_error.png" />
                        <div>密码错误，请重新输入</div>
                    </div> -->
        </div>
        <div class="createScreen_alert_c_b">
          <div @click.stop.prevent="configFn">确定</div>
          <!-- <div @click.stop.prevent="isInputPWD = !isInputPWD">取消</div> -->
          <div @click.stop.prevent="setScreenConfig({ isInputPWD: !isInputPWD })">
            取消
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: {
    personList: {
      // 可进入房间
      type: Array,
      default: () => {
        return [];
      },
    },
    RoomNo: {
      type: String,
      default: "",
    },
    globalOverScreen: {
      type: Boolean,
      default: false,
    },
    flag: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      defaultImg: 'this.src="static/image/home/person_1.png"',
      input: "",
      inputPWD: "",
      // isInputPWD: false,//以下三项移至props,由home传入,因初始化方法需要
      // isJoinScreen: false,
      // loadingShow: false,
      loadingTime: null,
      isUpdate: false,
    };
  },
  computed: {
    ...mapState(["isInputPWD", "isJoinScreen", "loadingShow"]),
    myInfo() {
      return this.$store.state.myInfo;
    },
    connectionState() {
      return this.$store.state.connectShareScreenServer;
    },
  },
  watch: {
    // 当前同屏房间关闭时
    RoomNo() {
      if (this.RoomNo == this.$store.state.screenRoomNo) {
        // this.isJoinScreen = false;
        this.setScreenConfig({ isJoinScreen: false });
        this.$emit("onlyScreen", 3);
        // init链接码
        this.$store.state.screenRoomNo = null;
      }
    },
    // 15s后无返回init加载状态
    loadingShow() {
      if (this.loadingShow) {
        this.loadingTime = setTimeout(() => {
          // this.loadingShow = false;
          this.setScreenConfig({ loadingShow: false });
          this.$message({
            message: "连接超时，请稍后再试",
            type: "warning",
          });
        }, 1000 * 15);
      } else {
        this.loadingTime && clearTimeout(this.loadingTime);
      }
    },
    globalOverScreen() {
      if (
        this.flag == 1 &&
        this.globalOverScreen &&
        this.$store.state.screenRoomNo
      ) {
        this.overScreenFn();
        // 重置全局结束同屏参数
        this.$emit("globalOverScreenFn");
        // 页面初始化
        this.$emit("onlyScreen", 3);
        // init链接码
        this.$store.state.screenRoomNo = null;
      }
    },
    personList() {
      this.isUpdate = false;
    },
  },
  methods: {
    ...mapMutations(["setScreenConfig"]),
    // 进入同屏 输入链接码
    joinScreenFn() {
      if (!this.connectionState) {
        this.$message({
          message: "同屏服务重连中，请稍后重试",
          type: "warning",
        });
        return;
      }
      this.input = this.input.replace(/\s+/g, "");
      console.log("this.input", this.input);
      if (this.input && this.input.length == 10) {
        // 有密码
        // this.isInputPWD = !this.isInputPWD;
        this.setScreenConfig({ isInputPWD: !this.isInputPWD });
      } else if (this.input && this.input.length == 9) {
        // 无密码
        // this.loadingShow = true;
        this.setScreenConfig({ loadingShow: true });
        setTimeout(() => {
          let info = this.$ShareScreenAssistance("EnterRoom", [
            `${this.myInfo.id}_PC`,
            this.input,
            "",
          ]);
          console.log(info, "进入同屏");
          info = JSON.parse(info);
          if (info.return_code === "FALSE") {
            this.$message({
              message: info.return_msg,
              type: "warning",
            });
          }
          this.setScreenConfig({ loadingShow: false });
        }, 600);
      } else {
        this.$message({
          message: "链接码输入有误，请重新输入",
          type: "warning",
        });
      }
    },
    // 输入密码点击确定
    configFn() {
      this.inputPWD = this.inputPWD.replace(/\s+/g, "");
      if (this.inputPWD) {
        // this.loadingShow = true;
        this.setScreenConfig({ loadingShow: true });
        setTimeout(() => {
          let info = this.$ShareScreenAssistance("EnterRoom", [
            `${this.myInfo.id}_PC`,
            this.input,
            this.inputPWD,
          ]);
          info = JSON.parse(info);
          if (info.return_code === "FALSE") {
            return this.$message({
              message: info.return_msg,
              type: "warning",
            });
          }
          this.setScreenConfig({ loadingShow: false });
        }, 600);
      }
    },
    // 进入同屏 点击设备人
    getInScreenFn(personListItem) {
      // 判断是否已经加入同屏
      if (this.$store.state.screenRoomNo) {
        this.$message({
          message: "你已加入同屏设备，请关闭后另行加入！",
          type: "warning",
        });
        return;
      }
      this.input = personListItem.RoomNo
      if (this.input && this.input.length == 10) {
        // 有密码
        // this.isInputPWD = !this.isInputPWD;
        this.setScreenConfig({ isInputPWD: !this.isInputPWD });
      } else {
        // this.loadingShow = true;
        this.setScreenConfig({ loadingShow: true });
        setTimeout(() => {
          let info = this.$ShareScreenAssistance("EnterRoom", [
            personListItem.OwnerInfo.ClientID,
            personListItem.RoomNo,
            personListItem.RoomPassword,
          ]);
          console.log(info, "进入同屏");
          info = JSON.parse(info);
          if (info.return_code === "FALSE") {
            this.$message({
              message: info.return_msg,
              type: "warning",
            });
          }
          this.setScreenConfig({ loadingShow: false });
        }, 600);
      }
    },
    // 进入同屏接口返回,初始化方法移入home页
    // getEnterRoom(Code, Explain, ClientID, Users, RoomNo) {
    //     console.log(Code, Explain, ClientID, Users, RoomNo, '进入同屏接口返回')
    //     this.loadingShow = false;
    //     if (Code == 0) {
    //         // 更新房间人数 当有人加入时
    //         if (Users) {
    //             this.$emit("updataUsers", JSON.parse(Users));
    //             return;
    //         }
    //         this.isInputPWD = false;
    //         this.isJoinScreen = true;
    //         this.$emit("onlyScreen", 1);
    //         // 存储链接码
    //         this.$store.state.screenRoomNo = RoomNo;
    //     } else {
    //         this.$message({
    //             message: Explain,
    //             type: "warning"
    //         })
    //     }
    // },
    // 结束同屏
    overScreenFn() {
      // this.loadingShow = true;
      this.setScreenConfig({ loadingShow: true });
      setTimeout(() => {
        let info = this.$ShareScreenAssistance("LeaveRoom", [
          `${this.myInfo.id}_PC`,
          this.input,
        ]);
        info = JSON.parse(info);
        if (info.return_code === "FALSE") {
          this.$message({
            message: info.return_msg,
            type: "warning",
          });
        }
        this.setScreenConfig({ loadingShow: false });
      }, 600);
    },
    // // 结束同屏接口返回
    // getLeaveRoom(Code, Explain, ClientID) {
    //     // this.loadingShow = false;
    //     this.setScreenConfig({loadingShow:false})
    //     console.log(Code, Explain, ClientID, '结束同屏接口返回join')
    //     if (Code == 0) {
    //         if (ClientID == this.myInfo.id + "_PC") {// 结束同屏的人是自己时
    //             // this.isJoinScreen = false;
    //             this.setScreenConfig({isJoinScreen:false})
    //             this.$emit("onlyScreen", 3);
    //             // init链接码
    //             this.$store.state.screenRoomNo = null;
    //         } else { // 结束同屏的人是他人时
    //             // 删除离开房间的人员
    //             this.$emit("delLeaveRoomUser", ClientID);
    //         }

    //     } else {
    //         this.$message({
    //             message: Explain,
    //             type: "warning"
    //         })
    //     }
    // },
    // 刷新可进入的房间
    SearchPublicRoom() {
      this.isUpdate = true;
      setTimeout(() => {
        this.$emit("SearchPublicRoom");
      }, 1000);
    },
  },
  created() {
    // 进入同屏接口返回//初始化方法移入home页
    // window.getEnterRoom = this.getEnterRoom;
    // 结束同屏接口返回
    // window.getLeaveRoom = this.getLeaveRoom;
  },
};
</script>
<style lang="less" scoped>
.createScreen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 0 16px;

  .createScreen_content {
    flex: 1;
    display: flex;

    .createScreen_content_l,
    .createScreen_content_r {
      padding-left: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
      background: #ffffff;

      .createScreen_content_l_t {
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #333333;
        font-weight: bold;
      }

      .createScreen_content_l_c {
        padding: 0 30px 0 10px;

        .createScreen_content_l_c_t,
        .createScreen_content_l_c_p,
        .createScreen_content_l_c_y {
          display: flex;
          height: 36px;
          align-items: center;

          .createScreen_content_l_c_t_t,
          .createScreen_content_l_c_p_t,
          .createScreen_content_l_c_y_t {
            font-size: 14px;
            color: #666;
            margin-right: 16px;
          }

          .createScreen_content_l_c_y_r {
            width: 240px;
          }
        }

        .createScreen_content_l_c_n {
          margin-top: 30px;
          width: 120px;
          height: 36px;
          font-size: 14px;
          color: #ffffff;
          border-radius: 4px;
          background: #fa7500;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }

      .createScreen_content_l_o {
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
          margin: 40px 0 20px 0;
        }

        div {
          width: 120px;
          height: 36px;
          border-radius: 4px;
          background: #ff4545;
          color: #ffffff;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
    }

    .createScreen_content_l {
      flex: 1;
      width: 66%;
      margin-right: 16px;
    }

    .createScreen_content_r {
      width: 33%;
      padding-right: 20px;
      display: flex;
      flex-direction: column;

      .createScreen_content_r_t {
        display: flex;
        height: 40px;
        align-items: center;
        justify-content: space-between;

        .createScreen_content_r_t_t {
          font-size: 14px;
          color: #333333;
          font-weight: bold;
        }

        .createScreen_content_r_t_i {
          margin-top: 5px;
          cursor: pointer;
        }

        .createScreen_content_r_t_p {
          display: flex;
          align-items: center;
          cursor: pointer;

          img {
            width: 14px;
            height: 14px;
            margin-right: 6px;
            margin-top: 2px;
          }

          div {
            font-size: 14px;
            color: #fa7500;
          }
        }
      }

      .createScreen_content_r_c {
        flex: 1;
        display: flex;
        flex-direction: column;

        .createScreen_content_r_c_c {
          flex: 1;
          overflow-y: scroll;
          height: 1px;

          .createScreen_content_r_c_c_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 40px;
            padding: 0 10px;

            .createScreen_content_r_c_c_item_l {
              display: flex;

              img {
                width: 24px;
                height: 24px;
                border-radius: 4px;
                margin-right: 10px;
              }

              div {
                font-size: 14px;
                color: #333333;
              }
            }
          }

          .createScreen_content_r_c_c_item:hover {
            background: #eeeeee;

            .createScreen_content_r_c_c_item_r {
              width: 20px;
              height: 20px;
              background: url("../../../../static/image/screen/screen_see.png");
              cursor: pointer;
            }
          }
        }
      }

      .createScreen_content_r_c.close {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 80px;

        img {
          margin-bottom: 15px;
        }

        div {
          font-size: 14px;
          color: #999999;
        }
      }
    }
  }

  .createScreen_alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;

    .createScreen_alert_c {
      width: 360px;
      height: 220px;
      background: #ffffff;
      border-radius: 4px;

      .createScreen_alert_c_t {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        padding-left: 20px;

        div:first-of-type {
          font-size: 14px;
          color: #333333;
          font-weight: bold;
        }

        div:nth-of-type(2) {
          height: 40px;
          cursor: pointer;
        }
      }

      .createScreen_alert_c_c {
        padding: 0 20px;
        margin-top: 30px;

        .createScreen_alert_c_c_a {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 10px;

          img {
            width: 12px;
            height: 12px;
            margin-right: 6px;
          }

          div {
            font-size: 12px;
            color: #ff4545;
          }
        }
      }

      .createScreen_alert_c_b {
        width: 100%;
        height: 28px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 20px;
        margin-top: 35px;

        div {
          width: 60px;
          height: 28px;
          font-size: 14px;
          color: #333333;
          border-radius: 4px;
          border: 1px solid #dddddd;
          background: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        div:first-of-type {
          color: #ffffff;
          background: #fa7500;
          border: 1px solid #fa7500;
          margin-right: 10px;
        }
      }
    }
  }
}

.createScreen_alert_c_c_i {
  input {
    text-align: center !important;
  }

  input:focus {
    border: 1px solid #fa7500 !important;
  }
}
</style>
